<script setup lang="ts">
  import { useGetReturnFactoryWaitCheckGoodList } from '@/services/pages/return-factory/useReturnFactory'
  import { PropType, ref, watch } from 'vue'
  import PartApplyModal from './good-list/PartApplyModal.vue'
  import { FormInstance } from 'element-plus'
  import { useReturnFactoryCheck } from '@/services/pages/return-factory/useReturnFactory'
  import { HMessageBox } from '@/components/common/message'

  const {
    waitGoodList,
    loading: getWaitCheckGoodListLoading,
    getWaitCheckGoodList,
  } = useGetReturnFactoryWaitCheckGoodList()
  const { form: returnFactoryCheckForm, checkLoading, check } = useReturnFactoryCheck()

  defineOptions({
    name: 'CheckGoodModalReturnFactoryDetail',
  })

  /**
   * checkMethod：1-整单审核、2-单独审核
   */
  const props = defineProps({
    returnFactoryId: {
      type: String,
      required: true,
    },
    goods: {
      type: Array as PropType<Array<ReturnFactoryDetailGood>>,
      required: true,
    },
    checkMethod: {
      type: Number as PropType<1 | 2>,
      default: () => 2,
    },
  })

  const emits = defineEmits<{
    (e: 'check-success'): void
  }>()

  const visible = defineModel('visible', { type: Boolean, default: false })
  const formInstance = ref<FormInstance | null>(null)
  const form = ref<{ checkResult: '1' | '2'; handleMethod: '1' | '2'; remark: string }>({
    checkResult: '1',
    handleMethod: '1',
    remark: '',
  })
  const rules = ref({
    checkResult: [{ required: true, message: '请选择审核结果', trigger: ['change', 'blur'] }],
  })
  const partApplyModalVisible = ref(false)
  const goodList = ref<Array<ReturnFactoryDetailGood>>(props.goods)

  const closeModal = () => {
    form.value = {
      checkResult: '1',
      handleMethod: '1',
      remark: '',
    }
    visible.value = false
  }

  const getStatusTxt = (
    status: ReturnFactoryDetailGood['status'],
  ): { txt: string; status: 'primary' | 'success' | 'info' | 'warning' } => {
    if (status === 0) {
      return {
        txt: '待审核',
        status: 'warning',
      }
    }

    if (status === 1) {
      return {
        txt: '待返厂',
        status: 'warning',
      }
    }

    if (status === 2) {
      return {
        txt: '待签收',
        status: 'warning',
      }
    }

    if (status === 3) {
      return {
        txt: '待检测',
        status: 'warning',
      }
    }

    if (status === 4) {
      return {
        txt: '处理中',
        status: 'primary',
      }
    }

    if (status === 5) {
      return {
        txt: '待寄回公司',
        status: 'success',
      }
    }

    if (status === 6) {
      return {
        txt: '待公司签收',
        status: 'primary',
      }
    }

    if (status === 7) {
      return {
        txt: '已完成',
        status: 'warning',
      }
    }

    if (status === 8) {
      return {
        txt: '已取消',
        status: 'success',
      }
    }

    return {
      txt: '已取消',
      status: 'success',
    }
  }

  const onConfirm = async () => {
    if (formInstance.value) {
      try {
        await formInstance.value.validate()
        returnFactoryCheckForm.value.checkStatus = Number(form.value.checkResult) as 1 | 2
        if (form.value.checkResult === '1') {
          returnFactoryCheckForm.value.handleMode = Number(form.value.handleMethod) as 1 | 2
          returnFactoryCheckForm.value.handleOpinion = form.value.remark
        }
        returnFactoryCheckForm.value.repariGoodsIds = goodList.value.map((item) => item.id)
        const res = await check(props.returnFactoryId)
        if (res.code === 20000) {
          closeModal()
          emits('check-success')
        } else {
          HMessageBox.error(res.message)
        }
      } catch (error) {
        // error
      }
    }
  }

  watch(
    visible,
    async (value) => {
      if (value && props.checkMethod === 1) {
        await getWaitCheckGoodList(props.returnFactoryId)
        goodList.value = waitGoodList.value
      }

      if (props.checkMethod === 2) {
        goodList.value = props.goods
      }
    },
    { immediate: true },
  )
</script>

<template>
  <h-drawer
    v-model="visible"
    title="返厂清单审核"
    :width="1000"
    unit="px"
    :loading="getWaitCheckGoodListLoading || checkLoading"
  >
    <div class="modal-body">
      <el-form
        ref="formInstance"
        :inline="true"
        :model="form"
        class="form"
        inline-message
        :rules="rules"
      >
        <div class="radio-group-wrapper">
          <!-- 审核结果 -->
          <el-form-item label="审核结果" class="radio-group-container" prop="checkResult">
            <el-radio-group v-model="form.checkResult">
              <el-radio label="通过" size="small" value="1" />
              <el-radio label="驳回" size="small" value="2" />
            </el-radio-group>
          </el-form-item>

          <!-- 处理方式 -->
          <el-form-item
            v-if="form.checkResult === '1'"
            label="处理方式"
            class="radio-group-container"
            prop="handleMethod"
          >
            <el-radio-group v-model="form.handleMethod">
              <el-radio label="确认返厂" size="small" value="1" />
              <el-radio label="无需返厂" size="small" value="2" />
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- 处理意见 -->
        <el-form-item
          v-if="form.checkResult === '1' && form.handleMethod === '2'"
          label="处理意见"
          class="textarea-container"
        >
          <el-input
            v-model.trim="form.remark"
            type="textarea"
            placeholder="请输入处理意见"
            maxlength="200"
            resize="both"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div class="good-list-wrapper">
        <div class="title">返厂清单</div>
        <el-table :data="goodList" :border="true" stripe>
          <!-- 序号 -->
          <el-table-column label="序号" type="index" fixed="left" :align="'center'" width="50" />

          <!-- 条码 -->
          <el-table-column label="条码" prop="code" width="140" show-overflow-tooltip />

          <!-- 品牌 -->
          <el-table-column label="品牌" width="120" prop="goodsBrand" show-overflow-tooltip />

          <!-- 产品名称 -->
          <el-table-column label="产品名称" width="160" prop="goodsName" show-overflow-tooltip />

          <!-- 型号 -->
          <el-table-column label="型号" width="120" prop="goodsModel" show-overflow-tooltip />

          <!-- 规格 -->
          <el-table-column label="规格" width="100" prop="goodsSpec" show-overflow-tooltip />

          <!-- 数量 -->
          <el-table-column label="数量" width="100" prop="qty" />

          <!-- 登记日期 -->
          <el-table-column label="登记日期" width="140" prop="warrantyStartTime" />

          <!-- 登记信息 -->
          <el-table-column label="登记信息" width="320" show-overflow-tooltip>
            <template #default="{ row }">
              <span>{{ row.username }}</span>
              <span>{{ '\xa0\xa0\xa0\xa0' }}</span>
              <span>{{ row.userPhone }}</span>
              <span>{{ '\xa0\xa0\xa0\xa0' }}</span>
              <span>{{ row.province }}</span>
              <span>{{ '\xa0' }}</span>
              <span>{{ row.city }}</span>
              <span>{{ '\xa0' }}</span>
              <span>{{ row.area }}</span>
              <span>{{ '\xa0' }}</span>
              <span>{{ row.address }}</span>
            </template>
          </el-table-column>

          <!-- 状态 -->
          <el-table-column label="状态" width="120" :align="'center'" fixed="right">
            <template #default="{ row }">
              <div class="flex_justify_center">
                <h-status :type="getStatusTxt(row.status).status">{{
                  getStatusTxt(row.status).txt
                }}</h-status>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- TODO 暂定 -->
      <!--<div class="part-list-wrapper" v-if="form.checkResult === '1' && form.handleMethod === '2'">-->
      <!--  <div class="title-wrapper">-->
      <!--    <div class="text">返厂单物料</div>-->
      <!--    <h-plain-button :height="20" :padding-lr="6" @click="partApplyModalVisible = true"-->
      <!--      >申请物料</h-plain-button-->
      <!--    >-->
      <!--  </div>-->
      <!--  <el-table :border="true" stripe>-->
      <!--    <el-table-column-->
      <!--      label="序号"-->
      <!--      type="index"-->
      <!--      fixed="left"-->
      <!--      :align="'center'"-->
      <!--      width="50"-->
      <!--    ></el-table-column>-->

      <!--    <el-table-column label="物料单号" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column label="申请类型" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column label="物料名称" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column label="旧件处理方式" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column label="申请人员" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column label="申请网点" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column label="申请时间" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column-->
      <!--      label="公司承担总费用"-->
      <!--      show-overflow-tooltip-->
      <!--      width="140"-->
      <!--    ></el-table-column>-->
      <!--    <el-table-column label="收取公司费用" show-overflow-tooltip width="140"></el-table-column>-->
      <!--    <el-table-column-->
      <!--      label="支付网点总费用"-->
      <!--      show-overflow-tooltip-->
      <!--      width="140"-->
      <!--    ></el-table-column>-->
      <!--    <el-table-column label="审核人员" show-overflow-tooltip width="100"></el-table-column>-->
      <!--    <el-table-column label="审批时间" show-overflow-tooltip width="100"></el-table-column>-->
      <!--  </el-table>-->
      <!--</div>-->
    </div>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="closeModal">取消</h-button>
    </template>

    <part-apply-modal v-model:visible="partApplyModalVisible" />
  </h-drawer>
</template>

<style scoped lang="scss">
  .modal-body {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
  }

  .good-list-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title {
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      font-weight: bold;
    }
  }

  .form {
    display: flex;
    column-gap: 64px;
    justify-content: flex-start;
    align-items: flex-start;

    :deep(.el-form-item) {
      display: flex;
      margin: 0;
      column-gap: 8px;

      .el-form-item__label {
        height: 28px;
        line-height: 28px;
        padding: 0;
      }

      .el-form-item__content {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: unset;

        .el-textarea {
          width: 100% !important;

          .el-textarea__inner {
            height: 28px;
            min-height: 28px !important;
            width: 100% !important;
            max-height: 140px !important;
          }
        }

        .el-form-item__error {
          margin: 3px 0 0 0;
          padding: 0;
        }
      }
    }

    .radio-group-wrapper {
      display: flex;
      column-gap: 64px;
      height: 28px;
      align-items: center;

      .radio-group-container {
        height: 16px;

        :deep(.el-form-item__label) {
          height: 16px;
          line-height: 16px;
        }

        :deep(.el-form-item__content) {
          height: 16px;
          line-height: 16px;

          .el-radio-group {
            column-gap: 10px;

            .el-radio {
              height: 16px;
              column-gap: 1px;
              margin: 0;

              .el-radio__label {
                height: 16px;
                line-height: 16px;
                padding: 0;
              }

              .el-radio__input.is-disabled.is-checked {
                .el-radio__inner {
                  background-color: #f5f7fa !important;
                  border-color: #e4e7ed !important;
                }
              }
            }

            .el-radio.is-disabled {
              .el-radio__label {
                color: #a8abb2 !important;
              }
            }
          }
        }
      }
    }

    .textarea-container {
      flex: 1;
    }
  }

  .part-list-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title-wrapper {
      display: flex;
      column-gap: 5px;
      align-items: center;

      .text {
        font-size: 12px;
        font-weight: bold;
        padding-left: 6px;
        border-left: 3px solid $primaryColor;
      }
    }
  }
</style>
